<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 之前我们大概的说了下动画的每个属性，这节课我们来仔细讲一下animation-play-function */

        /* 
            animation-play-function: 规定动画播放的速度曲线，默认是'ease'
                linear: 动画从头到尾的速度是相同的，匀速
                ease: 默认。低速开始，慢慢加快，结束前变慢
                ease-in: 低速开始
                ease-out: 低速结束
                ease-in-out: 动画以低速开始和结束
                steps(): 指定了时间函数中的间隔数量(步长)
            注意这个steps()这个挺重要的
        */

        div{
            height: 40px;
            background-color: pink;
            font-size: 18px;
            line-height: 40px;
            overflow: hidden;

            animation: move 5s forwards;

            /* 
                steps()就是分几步来完成我们的动画，有了steps就不要再写ease或者linear了 
                因为有些时候我们就想要那种步骤分明的动画
            */
            animation-timing-function: steps(10);
        }

        @keyframes move{
            0%{
                width: 0px;
            }
            100%{
                width: 200px;
                height: 40px;
            }
        }
    </style>
</head>
<body>
    <div>我留着陪你强忍着泪滴</div>
</body>
</html>